<template>
  <div class="admissionList">
    <div class="creatAccount" v-if="role==='1'">
      <div class="chooseContainer padding-box">
        <!-- <el-input placeholder="请输入搜索内容" v-model="spaceName" class="chooseBox"></el-input>
        <div class="btnBox">
          <el-button type="primary" @click="creatUser">搜索</el-button>
        </div> -->
      </div>
      <div class="padding-box">
        <el-table :data="userData" style="width: 100%" v-loading="loadingTable"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.2)" empty-text="暂无数据">
          <el-table-column prop="spaceName" label="空间名称" min-width="120" align="center">
          </el-table-column>
          <!-- <el-table-column prop="photo" label="用户头像" min-width="120">
            <template slot-scope="scope">
              <img style="width:60px;height:60px" :src="scope.row.photo" />
            </template>
          </el-table-column> -->
          <el-table-column prop="spaceAddress" label="空间地址" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="uname" label="联系人" min-width="120" align="center">
          </el-table-column>
          <el-table-column prop="tel" label="联系方式" min-width="120" align="center">
          </el-table-column>
          <!-- <el-table-column prop="user_type" label="密码" min-width="120">
          </el-table-column> -->
          <el-table-column prop="createTime" :formatter="dateFormat" label="提交时间" min-width="120" align="center">
          </el-table-column>
          <!-- <el-table-column label="操作" min-width="80">
            <template slot-scope="scope">
              <el-button type="text" @click="updateTel(scope.row)" size="mini">修改手机号</el-button>
              <el-button type="text" size="mini" @click="deleteConsumer(scope.row)">删除</el-button>
            </template>
          </el-table-column> -->
        </el-table>
        <div class="pageContainer" style="padding-bottom:30px">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="this.pageSizeArray" :page-size="this.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="creatAccount" v-if="role==='2'">
      您没有权限查看
    </div>
    <version></version>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import version from '@/base/version/version'
export default {
  name: 'admissionList',
  components: {
    version
  },
  data () {
    return {
      pageSizeArray: [10, 20, 30, 40, 50],
      pageNo: 1,
      pageSize: 10,
      pageTotal: null,
      total: 0,
      loadingTable: true,
      userData: []
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  watch: {
    pageSize (newVal, oldVal) {
      if (this.pageTotal > newVal) {
        this.getUserList()
        return false
      }
      if (this.pageTotal < oldVal) {
        return false
      }
      this.getUserList()
    },
    total (val) {
      if (val === 1) {
        this.isShowPage = false
      } else {
        this.isShowPage = true
      }
    }
  },
  created () {
    this.getUserList()
    this.role = this.userInfo.roleId
    console.log(this.userInfo.roleId)
  },
  methods: {
    // 修改每页显示的数据数目
    handleSizeChange (val) {
      this.pageSize = val
      this.getUserList()
    },
    // 设置pageNo
    handleCurrentChange (val) {
      this.pageNo = val
      this.getUserList()
    },
    dateFormat (row, column) {
      var date = row.createTime.substring(0, 10) + ' ' + row.createTime.substring(11, 19)
      return date
    },
    getUserList () {
      this.$axios.post('/api/space/showSpaceApply', {
        userId: this.userInfo.userId,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }).then(response => {
        const res = response.data
        if (res.code === '00000000') {
          this.loadingTable = false
          let arr = res.apply
          console.log(arr)
          let userList = []
          for (let i = 0; i < arr.length; i++) {
            userList.push({
              spaceName: arr[i].spaceName,
              uname: arr[i].uname,
              createTime: arr[i].createTime,
              tel: arr[i].tel,
              spaceAddress: arr[i].spaceAddress
            })
          }
          this.userData = [...userList]
          this.total = res.total
        }
      })
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/variable'
.edition
  margin-left 44%
  margin-bottom 20px
  color #999
  font-size 12px
.chooseContainer
  background $bg-normal
  overflow hidden
  display flex
  width 100%
  padding $spacing
  padding-bottom 20px
  flex-wrap wrap
  box-sizing border-box
  .chooseBox
    flex 0 0 224px
    margin-right $spacing
    margin-bottom $spacing
</style>
